<!--
 * @Author: 关棺 9382059+close-the-coffin@user.noreply.gitee.com
 * @Date: 2024-06-09 10:01:55
 * @LastEditors: 关棺 3156298705@qq.com
 * @LastEditTime: 2024-12-19 14:42:24
 * @FilePath: \supervision-ui\src\views\Appr\index.vue
 * @FileName:  仓库管理.vue
-->
<template>
  <div class="box-card">
    <el-card>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in tabList"
          :key="index"
          :label="item.label"
          :name="item.name"
        ></el-tab-pane>
      </el-tabs>
      <el-form
        :model="queryParams"
        ref="queryForm"
        id="queryH"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
        v-hasPermi="['system:stockInRecord:query']"
      >
        <el-form-item label="审批名称" prop="name">
          <el-input
            v-model="queryParams.stockInNum"
            placeholder="请输入审批名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <!-- <el-button type="primary" size="mini" @click="add()">新增</el-button> -->
          <!-- <el-button
            type="danger"
            v-if="activeName == 'first'"
            v-hasPermi="['system:stockInRecord:remove']"
            size="mini"
            @click="handleDelete"
            :disabled="!ids.length"
            >批量删除</el-button
          > -->
        </el-form-item>
      </el-form>

      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
      <!-- 
       
         -->
      <el-table
        :height="computedHeight"
        :data="tableData"
        border
        v-loading="loading"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column type="index" label="序号" width="50"></el-table-column>

        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="content" label="内容"></el-table-column>
        <!-- <el-table-column prop="" label="指定人"> </el-table-column> -->
        <!-- <el-table-column prop="" label="指定部"> </el-table-column> -->
        <el-table-column prop="approvalStatus" label="状态">
          <template slot-scope="{ row }">
            <div v-if="activeName == 'Water'">
              <el-tag
                :type="
                  row.approvalStatus == 101
                    ? 'info'
                    : '' || row.approvalStatus == 301
                    ? 'success'
                    : '' || row.approvalStatus == 302
                    ? 'danger'
                    : ''
                "
              >
                {{ filterExamineAndApprove( row.approvalStatus) }}
              </el-tag>
            </div>
            <div v-else>
              <el-tag
                :type="
                  row.status == 101
                    ? 'info'
                    : '' || row.status == 301
                    ? 'success'
                    : '' || row.status == 302
                    ? 'danger'
                    : ''
                "
              >
              {{ filterExamineAndApprove(row.status) }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="创建人">
          <template slot-scope="{ row }">
            {{
              row.hasOwnProperty("createUserName")
                ? row.createUserName
                : row.createUser
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="" label="备注"> </el-table-column> -->
        <el-table-column label="操作" width="230px">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              v-if="row.status == 101"
              @click="add(row, 0)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              v-if="row.approvalStatus == 101 || row.approvalStatus == 201"
              @click="add(row, 2)"
            >
              审核
            </el-button>
            <el-button
              type="text"
              v-if="row.status == 101"
              style="color: red"
              @click="deleteHandle(row)"
            >
              删除
            </el-button>
            <el-button
              v-if="row.status == 101"
              type="text"
              @click="add(row, 1)"
            >
              发起审批
            </el-button>
            <!-- <el-button
            type="text"
            @click="addOrUpdateHandle(row.id, 3)"
            v-if="row.approvalStatus == 301"
          >
            流转审批
          </el-button> -->
            <!-- <el-button
            type="text"
            @click="deleteHandle(row, 1)"
            v-if="row.approvalStatus == 301 && row.status != 301"
          >
            完结
          </el-button> -->
            <el-button type="text" @click="Popup(row)"> 记录 </el-button>
            <!--  <el-button type="text" @click="addOrUpdateHandle(row.userId)">
            发起审批
          </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <addDialog ref="addDialog" @dialogBack="(e) => getList(e)" />
    <recordadd-or-update ref="RecordaddOrUpdate" />
  </div>
</template>

<script>
import { resizeMixin } from "@/mixins/resizeMixin";
import addDialog from "./components/addDialog";
import recordaddOrUpdate from "./components/recordaddOrUpdate";
import {
  approvalFromQueryApprovalByLaunch,
  approvalFromQueryApprovalBy,
  approvalFromDeleteApproval,
} from "@/api/system/Approval";
import { mapState } from "vuex";
export default {
  components: {
    addDialog,
    recordaddOrUpdate,
  },

  mixins: [resizeMixin],
  data() {
    return {
      tableData: [],
      tabList: [
        { label: "我的申请", name: "All" },
        { label: "我的待办", name: "Water" },
      ],
      ExamineAndApprove: [
    { label: "未开始", value: 101 },
    { label: "已读", value: 102 },
    { label: "审批中", value: 201 },
    { label: "审核通过", value: 301 },
    { label: "驳回", value: 302 },
  ],
      activeName: "All",
      // 显示搜索条件
      total: 0,
      showSearch: true,
      loading: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      checkedKeys: false, //是否全选
      multipleSelection: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
    };
  },
  computed: {
    computedHeight() {
      return this.tabH2 - 135;
    },
    ...mapState({
      user: (state) => state.user.user,
    }),
  },
  async mounted() {
    await this.$nextTick();
    console.log(this.user);
    this.$watch(
      () => this.user,
      async (newVal, oldVal) => {
        if (newVal) this.getList();
      },
      { immediate: true }
    );
  },

  methods: {
    filterExamineAndApprove(value) {
      // 查找匹配的项
      const result = this.ExamineAndApprove.find(item => item.value === value);
      // 如果找到，返回 label，否则返回 "未知状态"
      return result ? result.label : "未知状态";
    },
    add(row, type = 0) {
      this.$refs.addDialog.init(
        row.id,
        type,
        "",
        row.type,
        row.hasOwnProperty("fromId")
      );
    },
    Popup(row) {
      let id = "";
      if (row.hasOwnProperty("fromId")) {
        id = row.fromId;
      } else {
        id = row.id;
      }
      this.$refs.RecordaddOrUpdate.init(id, row);
    },
    addCallBack() {
      this.getList();
    },
    isRowSelectable(row) {
      // 如果 state 等于 1，则返回 false 禁止选择，否则允许选择
      return row.state == 0;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    async getList() {
      this.loading = true;
      let type = "";
      this.activeName == "All" ? (type = 0) : (type = 1);
      this.queryParams.approvalId = this.user.userId;
      // console.log(122);
      let res =
        type === 0
          ? await approvalFromQueryApprovalByLaunch(this.queryParams)
          : await approvalFromQueryApprovalBy(this.queryParams);
      this.tableData = res.data.records;
      this.loading = false;
      this.total = res.data.total;
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        stockInNum: null,
        type: null,
        batchId: null,
        equipmentNum: null,
        equipmentName: null,
        equipType: null,
        inStockNum: null,
        inStockAdress: null,
        inStockName: null,
        inStockPerson: null,
        inStockTime: null,
      };
      this.handleQuery();
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    handleClick(tab) {
      // console.log(tab.name);
      this.getList();
    },
    deleteHandle(row, type = 0) {
      this.$modal
        .confirm(
          `此操作将${type == 0 ? "删除审批单" : "完结审批"}, 是否继续?`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
        .then(async () => {
          try {
            await approvalFromDeleteApproval({ id: row.id });
            this.$modal.msgSuccess("删除成功");
            this.getList();
          } catch (err) {
            console.log(err);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${type == 0 ? "删除审批单" : "完结审批"}`,
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.box-card {
  padding: 20px;
  width: calc();
}
</style>
